import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import './style/main.scss'
import Guan from './main-left/guanli'
import Jiao from './main-left/jiao'
class header extends Component {
    constructor() {
        super()
        this.state = {
            lData: [
                {
                    text: '微课管理',
                    url: ''
                },
                {
                    text: '教学统计',
                    url: ''
                },
                {
                    text: '收益总览',
                    url: ''
                },
                {
                    text: '我的名师',
                    url: ''
                },
                {
                    text: '我的课程',
                    url: ''
                },
                {
                    text: '我的账户',
                    url: ''
                },
                {
                    text: '我的优惠',
                    url: ''
                },
                {
                    text: '个人设置',
                    url: ''
                },
                {
                    text: '安全中心',
                    url: ''
                }
            ],
            num: 0
        }
    }
    getNum(index) {
        this.setState({
            num: index
        })
    }
    render() {
        console.log(241 / 1202)
        console.log(143 * 1.1)
        const { lData, num } = this.state
        return (
            <div className='main'>
                <div className='left-cen'>
                    {/* 头像 */}
                    <div className='l-headimg-box'>
                        <div className='l-headimg'>
                            <div className='l-head-img'>
                                <img src="C:/Users/Lenovo/Pictures/Saved Pictures/e712c65a388ddb03b2ca1358b6ded02e" alt="" />
                            </div>
                            <div className='l-head-name'>
                                <h1>老猎人</h1>
                                <p>血源诅咒终极BOSS</p>
                            </div>
                        </div>
                    </div>
                    {/* 侧边栏 */}
                    <div className='l-nav'>
                        <ul>
                            {
                                lData.map((item, index) => {
                                    return <li key={index} onClick={() => this.getNum(index)} style={{ background: num === index ? '#f4f4f4' : '#ffffff', color: num === index ? '#5a5a5a' : '#30bb5a' }}>
                                        <span>
                                            ↑ {item.text}
                                        </span>
                                    </li>
                                })
                            }

                        </ul>
                    </div>
                </div>
                <div className='right-cen'>
                    {
                        num === 0 ? <Guan /> : ''
                    }
                    {
                        num === 1 ? <Jiao /> : ''
                    }
                </div>
            </div>
        )
    }
}

export default header